import React, { Component } from 'react';
import { Link, browserHistory } from 'dva/router';
import autoBind from 'react-autobind';
import { Grid } from 'antd-mobile';

// style
import styles from './index.css';
import IconfontStyle from '../../../../assets/iconfont/iconfont.css';

class CategoryGoodsItem extends Component {
	constructor(props) {
      super(props)
      autoBind(this)
  }
  navCategory(catName) {
    browserHistory.push(`/categoryDetail?keywords=${catName}`)
  }
	render() {
    const { info } = this.props

	 	return (
        <div className={`${styles['category-goods-item']} category-goods-item`}>

          {
            info.children.map((item, ii) => {
              return (<div  key={ii} className={styles['category-goods-item-single']}>
                      <div className={styles['category-goods-item-title']} onClick={this.navCategory.bind(this, item.catName)}>
                      {item.catName}
                      <span className={styles['category-goods-item-title-dot']}></span>
                    </div>
                    <div className={styles['category-goods-item-body']}>
                      <Grid data={item.children} columnNum={3}
                        renderItem={(dataItem, index) => (
                          <div className={styles['category-goods-item-body-text']} onClick={this.navCategory.bind(this, dataItem.catName)}>
                            {dataItem.catName}
                          </div>
                        )}/>
                    </div>
                </div>)
            })
          }
          
        </div>
	  	);
	}
};

CategoryGoodsItem.propTypes = {
};

export default CategoryGoodsItem
